<template>
  <div class="yq-select-test">
    <h2>YqWinPlus 下拉列表组件测试</h2>
    
    <div class="test-section">
      <h3>基础用法</h3>
      <yq-select v-model="selectedValue1" placeholder="请选择选项">
        <yq-option label="选项1" value="option1" />
        <yq-option label="选项2" value="option2" />
        <yq-option label="选项3" value="option3" />
      </yq-select>
      <div class="selected-value">选中值: {{ selectedValue1 }}</div>
    </div>
    
    <div class="test-section">
      <h3>禁用状态</h3>
      <yq-select v-model="selectedValue2" placeholder="请选择选项" disabled>
        <yq-option label="选项1" value="option1" />
        <yq-option label="选项2" value="option2" />
        <yq-option label="选项3" value="option3" />
      </yq-select>
      <div class="selected-value">选中值: {{ selectedValue2 }}</div>
    </div>
    
    <div class="test-section">
      <h3>自定义宽度</h3>
      <yq-select v-model="selectedValue3" placeholder="请选择选项" style="width: 300px;">
        <yq-option label="选项1" value="option1" />
        <yq-option label="选项2" value="option2" />
        <yq-option label="选项3" value="option3" />
      </yq-select>
      <div class="selected-value">选中值: {{ selectedValue3 }}</div>
    </div>
    
    <div class="test-section">
      <h3>带有清空按钮</h3>
      <yq-select v-model="selectedValue4" placeholder="请选择选项" clearable>
        <yq-option label="选项1" value="option1" />
        <yq-option label="选项2" value="option2" />
        <yq-option label="选项3" value="option3" />
      </yq-select>
      <div class="selected-value">选中值: {{ selectedValue4 || '未选择' }}</div>
    </div>

    <div class="test-section">
      <h3>通过数据动态生成</h3>
      <yq-select v-model="selectedValue5" placeholder="请选择选项">
        <yq-option 
          v-for="item in optionsData" 
          :key="item.no" 
          :label="item.name" 
          :value="item.no" 
        />
      </yq-select>
      <div class="selected-value">选中值: {{ selectedValue5 || '未选择' }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 选中值
const selectedValue1 = ref('option1')
const selectedValue2 = ref('option2')
const selectedValue3 = ref('option3')
const selectedValue4 = ref('option1')

// 动态生成下拉列表的数据
const optionsData = [
  { "no": "option1", "name": "选项1" },
  { "no": "option2", "name": "选项2", "selected": true },
  { "no": "option3", "name": "选项4" }
]

// 找到默认选中项
const defaultSelected = optionsData.find(item => item.selected)?.no || ''
const selectedValue5 = ref(defaultSelected)
</script>

<style scoped>
.yq-select-test {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #303133;
  margin-bottom: 20px;
}

h3 {
  color: #606266;
  margin: 20px 0 10px 0;
  font-size: 16px;
}

.test-section {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fafafa;
}

.selected-value {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
</style>